<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>发送任务列表</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-input v-model="keyword" placeholder="消息备注">
                <el-button @click="get_list()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <el-table :data="table_data" style="width: 100%;margin: 20px;">
                <el-table-column prop="msg" label="消息备注" width="180">
                </el-table-column>
                <el-table-column prop="delay" label="发送时间" width="180">
                </el-table-column>
                <el-table-column prop="operation" label="删除" width="180">
                    <template slot-scope="scope">
                        <el-button size="small" type="danger" @click="del_task(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center; margin-top: 10px;">
                <el-pagination background layout="total, sizes, prev, pager, next" :total="total"
                               :page-sizes="[10, 15, 20, 50]" :page-size="pagesize" @size-change="size_change"
                               @current-change="current_change"></el-pagination>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            keyword: '',
            table_data: [],
            pagesize: 10,
            total: 0,
            page: 1,
        },
        methods: {
            // 页码切换
            current_change(page) {
                this.page = page;
                this.get_list();
            },
            // 每页展示切换
            size_change(val) {
                this.pagesize = val;
                this.get_list();
            },
            // 删除任务
            del_task(id) {
                this.$confirm('此操作将删除此任务,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        type: 'post',
                        cache: false,
                        url: '{:url("customer/del_task")}',
                        data: {id: id},
                        success: function (res) {
                            if (res) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            } else {
                                this.$message.error('删除失败');
                            }
                        },
                        error: function () {
                            this.$message.error('发生系统错误,请与管理员联系！');
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 获取任务数据
            get_list() {
                var that = this;
                $.ajax({
                    type: 'post',
                    cache: false,
                    url: '{:url("customer/get_task_list")}',
                    data: {page: that.page, pagesize: that.pagesize, keyword: that.keyword},
                    success: function (res) {
                        if (res.code == 0) {
                            that.table_data = res.data.list;
                            that.total = res.data.total;
                        } else {
                            that.table_data = [];
                            that.total = 0;
                        }
                    },
                    error: function () {
                        alert("发生系统错误,请与管理员联系！");
                    }
                });
            }
        }
    });
    vm.get_list();
</script>
</html>